<template>
    <Form :model="project" :rules="ruleValidate" ref="project-form" label-position="top" @submit.native.prevent>
        <div class="head-project">
            <div class="title"><span>基础信息</span></div>
            <div style="padding-top:14px">
                <Poptip trigger="hover" title="Title" content="content">
                    <Icon type="ios-help-outline" size="16" color="#2d8cf0" style="font-weight: 800;"></Icon>
                </Poptip>
            </div>
        </div>
        <Form-item label="项目名" prop="name" >
            <Input v-model="project.name" placeholder="demo"></Input>
        </Form-item>
        <Row :gutter="16">
            <Col span="12">
                <Form-item label="项目包名" prop="packages" >
                    <Input v-model="project.packages" placeholder="com.hotpot.demo"></Input>
                </Form-item>
            </Col>
            <Col span="12">
                <Form-item label="标题" prop="description" >
                    <Input v-model="project.description" placeholder="请输入标题"></Input>
                </Form-item>
            </Col>
        </Row>
        <div class="head-project">
            <div class="title"><span>数据库</span></div>
            <div style="padding-top:14px">
                <Poptip trigger="hover" title="Title" content="content">
                    <Icon type="ios-help-outline" size="16" color="#2d8cf0" style="font-weight: 800"></Icon>
                </Poptip>
            </div>
        </div>
        <Form-item label="数据库类型" prop="datasources[0].dbtype">
            <RadioGroup v-model="project.datasources[0].dbtype">
                <Radio label="mysql"></Radio>
                <Radio label="oracle" style="margin-left: 32px"></Radio>
            </RadioGroup>
        </Form-item>
        <Row :gutter="16">
            <Col span="12">
                <Form-item label="数据库地址" prop="datasources[0].dburl" >
                    <Input v-model="project.datasources[0].dburl"></Input>
                </Form-item>
            </Col>
            <Col span="12">
                <Form-item label="数据库名称" prop="datasources[0].dbname" >
                    <Input v-model="project.datasources[0].name"></Input>
                </Form-item>
            </Col>
        </Row>
        <Row :gutter="16">
            <Col span="12">
                <Form-item label="数据库用户名" prop="datasources[0].dbuser">
                    <Input v-model="project.datasources[0].dbuser"></Input>
                </Form-item>
            </Col>
            <Col span="12">
                <Form-item label="数据库密码" prop="datasources[0].dbpassword">
                    <Input v-model="project.datasources[0].dbpassword"></Input>
                </Form-item>
            </Col>
        </Row>
    </Form>
</template>

<script>
    export default {
        data() {
            return {
                project: {
                    name: 'demo',
                    packages: 'com.hotpot.demo',
                    description: 'demo',
                    datasources: [{
                        dbpassword: 'Root123456',
                        dbtype: 'mysql',
                        dburl: 'jdbc:mysql://10.64.11.73:3306/demo?useUnicode=true&characterEncoding=utf-8',
                        dbuser: 'root',
                        name: 'demo'
                    }]
                },
                ruleValidate: {
                    name: [
                        {required: true, message: '项目名不能为空', trigger: 'blur'},
                        {pattern: /^[^\s]+$/, message: '项目名不能输入空格', trigger: 'blur'}
                    ],
                    packages: [
                        {required: true, message: '项目包名不能为空', trigger: 'blur'},
                        {pattern: /^[^\s]+$/, message: '不能输入空格', trigger: 'blur'}
                    ],
                    description: [
                        {required: true, message: '标题不能为空', trigger: 'blur'},
                        {pattern: /^[^\s]+$/, message: '不能输入空格', trigger: 'blur'}
                    ],
                    'datasources[0].dbtype': [
                        {required: true, message: '请选择数据库类型', trigger: 'change'}
                    ],
                    'datasources[0].name': [
                        {required: true, message: '数据库名称不能为空', trigger: 'blur'}
                    ],
                    'datasources[0].dbuser': [
                        {required: true, message: '数据库用户名不能为空', trigger: 'blur'}
                    ],
                    'datasources[0].dburl': [
                        {required: true, message: '数据库地址不能为空', trigger: 'blur'}
                    ],
                    'datasources[0].dbpassword': [
                        {required: true, message: '数据库密码不能为空', trigger: 'blur'}
                    ]
                },
            };
        },
        created(){
        },
        methods: {
            initData(project){
                for (let key in this.project) {
                    this.project[key] = project[key];
                }
            },
            getData() {
                return this.project;
            },
            valData() {
                let _this = this;
                return new Promise((resolve, reject) => {
                    _this.$refs['project-form'].validate((valid) => {
                        if (valid) {
                            _this.$http.post('/codegen/api/v1/datasource/check', _this.project.datasources[0]).then((response) => {
                                if (response.data.statusCode == '200') {
                                    resolve(true);
                                } else if (response.data.statusCode == '300') {
                                    this.$Message.warning(response.data.message);
                                    resolve(false);
                                }
                            }).catch(() => {
                                this.$Message.error('数据库添加失败！');
                                resolve(false);
                            });
                        } else {
                            resolve(false);
                        }
                    });
                });
            }
        }
    };
</script>

<style scoped lang="scss">
    .head-project {
        display: flex;
        justify-content: space-between;
        .title {
            width: 120px;
            padding: 6px 0;
            border-bottom: 1px solid #2d8cf0;
            span {
                font-size: 18px;
                font-weight: bold;
            }
        }
        border-bottom: 1px solid #e9eaec;
        margin: 16px 0;
    }
</style>